import { useState } from 'react'
import './index.scss'
import { LeftOutline, CloseOutline } from 'antd-mobile-icons'

import { useNavigate } from 'react-router-dom'

/**
 * 门诊报告页面组件
 * 功能：显示患者的检查报告和检验报告，支持切换不同患者
 */
function Mzbg() {
  const navigate = useNavigate()
  const [activeSegment, setActiveSegment] = useState('check')
  const [showModal, setShowModal] = useState(false) // 控制选择就诊人模态框的显示/隐藏
  const [selectedPatient, setSelectedPatient] = useState('王小美') // 当前选中的患者姓名
  
  /**
   * 处理切换按钮点击事件
   * 显示选择就诊人的模态框
   */
  const handleSwitch = () => {
    setShowModal(true)
  }

  /**
   * 关闭模态框
   */
  const handleCloseModal = () => {
    setShowModal(false)
  }

  /**
   * 选择患者
   * @param {string} patientName - 患者姓名
   */
  const handleSelectPatient = (patientName: string) => {
    setSelectedPatient(patientName) // 更新选中的患者
    setShowModal(false) // 关闭模态框
  }

  /**
   * 患者数据列表
   * 包含每个患者的完整信息
   */
  const patients = [
    { 
      name: '王小美', 
      id: '2015****10',
      gender: '女',
      age: '25岁'
    },
    { 
      name: '李玲玲', 
      id: '2015****11',
      gender: '女',
      age: '30岁'
    }
  ]

  // 获取当前选中患者的完整信息
  const currentPatient = patients.find(p => p.name === selectedPatient) || patients[0]
  
  return (
    <div className='mzbg'>
      <div className='mzbg-top'>
        <span>{<LeftOutline className='mzbg-top-left' onClick={() => navigate(-1)}></LeftOutline>}</span>
        <span className='mzbg-top-title'>门诊报告 </span>
      </div>
      <div className='mzbg-bg'>
        <div className='account-card'>
          <div className='account-info'>
            <div className='account-name'>{currentPatient.name}</div>
            <div className='account-id'>{currentPatient.id}</div>
          </div>
          <div className='account-switch' onClick={handleSwitch}>
            <div className='switch-icon'>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16 17L21 12L16 7" stroke="#1890ff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M21 12H9" stroke="#1890ff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="#333" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <span className='switch-text'>切换</span>
          </div>
        </div>
        <div className='mzbg-bg-two'>
          <div className='segment-control'>
            <div className={`segment-item ${activeSegment === 'check' ? 'active' : ''}`} onClick={() => setActiveSegment('check')}>
              检查
            </div>
            <div className={`segment-item ${activeSegment === 'test' ? 'active' : ''}`} onClick={() => setActiveSegment('test')}>
              检验
            </div>
          </div>

          {activeSegment === 'check' && (
            <div className='report-list-container'>
              <div className='report-item' onClick={() => navigate('/jcbg')}>
                <div className='report-indicator'></div>
                <div className='report-content'>
                  <div className='report-title'>双肾及肾血管彩色多普勒</div>
                  <div className='report-time'>报告时间: 2020-01-01 10:20:36</div>
                </div>
                <div className='report-status issued'>报告已出</div>
              </div>

              <div className='report-item' onClick={() => navigate('/jcbg')}>
                <div className='report-indicator'></div>
                <div className='report-content'>
                  <div className='report-title'>上腹部CT平扫</div>
                  <div className='report-time'>报告时间: 2020-01-01 10:20:36</div>
                </div>
                <div className='report-status issued'>报告已出</div>
              </div>

              <div className='report-item'>
                <div className='report-indicator'></div>
                <div className='report-content'>
                  <div className='report-title'>核磁共振</div>
                  <div className='report-time'>报告时间: --</div>
                </div>
                <div className='report-status pending'>报告未出</div>
              </div>
            </div>
          )}

          {activeSegment === 'test' && (
            <div className='report-list-container'>
              <div className='report-item' onClick={() => navigate('/jybg')}>
                <div className='report-indicator'></div>
                <div className='report-content'>
                  <div className='report-title'>血常规检查</div>
                  <div className='report-time'>报告时间: 2024-01-15 14:30:25</div>
                </div>
                <div className='report-status issued'>报告已出</div>
              </div>

              <div className='report-item' onClick={() => navigate('/jybg')}>
                <div className='report-indicator'></div>
                <div className='report-content'>
                  <div className='report-title'>肝功能检查</div>
                  <div className='report-time'>报告时间: 2024-01-10 09:15:10</div>
                </div>
                <div className='report-status issued'>报告已出</div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* 选择就诊人模态框 */}
      {showModal && (
        <div className='modal-overlay' onClick={handleCloseModal}>
          <div className='modal-content' onClick={(e) => e.stopPropagation()}>
            <div className='modal-header'>
              <span className='modal-title'>选择就诊人</span>
              <CloseOutline className='close-btn' onClick={handleCloseModal} />
            </div>
            <div className='patient-list'>
              {patients.map((patient, index) => (
                <div 
                  key={index}
                  className={`patient-item ${selectedPatient === patient.name ? 'selected' : ''}`}
                  onClick={() => handleSelectPatient(patient.name)}
                >
                  <span className='patient-name'>{patient.name}</span>
                  <span className='patient-id'>{patient.id}</span>
                </div>
              ))}
            </div>
            <div className='modal-footer'>
              <button className='add-patient-btn'>添加就诊人</button>
            </div>
          </div>
        </div>
      )}

    </div>
  )
}

export default Mzbg